<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标签输入框</title>
		<style>
			.outside {
				margin: 0 auto;
				width: 800px;
			}

			.tag {
				border: 1px solid #ccc;
				padding-left: 5px;
			}

			.tag form .enter {
				border: 0;
			}

			.enter {
				height: 50px;
				padding: 3px 6px;
				outline: 0;
			}
		</style>
	</head>
	<body>
		<div class="outside">
			<h4>标签输入框</h4>
			<div class="tag">
				<form style="display: inline-block;" onsubmit="return false;">
					<input type="text" placeholder="请输入标签,多个标签用逗号分割" class="enter">
				</form>
			</div>
		</div>

		<script>
			var oInput = document.querySelector('.enter');
			var oTag = document.querySelector('.tag');
			document.onkeydown = function(event) {
				if (event.key === 'Enter') {
					var input = oInput.value.trim();
					var input_new = input.replaceAll(",", "，").split("，");
					input_new.forEach(function(element) {
						var oDiv = document.createElement('div');
						oDiv.innerHTML = element + " <b style='cursor: pointer;'>x<b>";
						oDiv.style.padding = "5px";
						oDiv.style.backgroundColor = "blue";
						oDiv.style.color = "white";
						oDiv.style.textAlign = "center";
						oDiv.style.display = "inline-block";
						oDiv.style.marginRight = "10px";
						oTag.prepend(oDiv);
						oInput.value = "";
					});
				}
			}
			oTag.onclick = function(event) {
				if (event.target.tagName === "B") {
					event.target.parentElement.remove();
				}
			}
		</script>
	</body>
</html>
